<script src="../../utils/auth.js"></script>
<script src="../../../config/host.cfg.js"></script>

<template>
  <div class="model-container">
    <div class="listName">商品</div>
    <!--搜索-->
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>快捷搜索</span>
        <div class="btns-wrapper-right">
          <el-button v-if="!searchShow" icon="el-icon-arrow-down" @click="searchShow = true"/>
          <el-button v-else icon="el-icon-arrow-up" @click="searchShow = false"/>
        </div>
      </div>
      <el-collapse-transition>
        <div v-show="searchShow" class="cardbody">
          <el-form ref="seacherParam" :model="seacherParam">
            <el-row :gutter="10">
              <el-col :xl="5" :lg="6" :md="6" :sm="8" >
                <el-col :xl="7" :lg="7" :md="8" :sm="8" class="input-name">商品名称</el-col>
                <el-col :xl="17" :lg="17" :md="16" :sm="16">
                  <el-form-item prop="shopName">
                    <el-input v-model="seacherParam.shopName" size="small" placeholder="请输入服务项目"/>
                  </el-form-item>
                </el-col>
              </el-col>
            </el-row>
            <div class="cardfooter">
              <el-button type="primary" size="mini" plain @click="seachFun">查询</el-button>
              <el-button type="warning" size="mini" plain @click="resetFun">重置</el-button>
            </div>
          </el-form>
        </div>
      </el-collapse-transition>
    </el-card>
    <!--表格-->
    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">
          <el-button type="primary" plain @click="add">新增</el-button>
          <!--<el-button type="danger" plain @click="del(0)">批量删除</el-button>-->
        </div>
      </div>
      <div class="table-wrapper">
        <el-table v-loading="!dataOption" :stripe="true" :data="dataOption"  border empty-text="暂无数据" @selection-change="changeFun">

          <el-table-column align="center" type="selection" width="55"/>

          <el-table-column align="center" prop="shopName" label="商品名称"/>



          <el-table-column align="center" prop="coding" label="商品编码"/>

          <el-table-column align="center" prop="inventory" label="库存"/>


          <el-table-column align="center" prop="specification" label="规格"/>

          <el-table-column align="center" prop="price" label="销售单价"/>
          <el-table-column align="center" prop="createTime" label="创建时间"/>
          <el-table-column align="center" prop="remark" label="备注"/>
          <!--
                    <el-table-column align="center" label="是否可用">
                      <template slot-scope="scope">{{ isAvailableVal(scope.row.isAvailable) }}</template>
                    </el-table-column>-->

          <el-table-column align="center" label="操作" width="200px">
            <template slot-scope="scope">

              <el-button title="编辑" type="primary" circle icon="el-icon-edit" class="table-icon" @click="edit(scope.row)"/>

              <el-button  title="删除" type="warning" circle icon="el-icon-delete" class="table-icon" @click="del1(scope.row)"/>
            </template>
          </el-table-column>

        </el-table>

        <!--分页-->
        <el-pagination
          :current-page="pageNo"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="rowCount"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>

    <!--弹框-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogState"
      :close-on-click-modal="false"
      :before-close="handleClose"
      top="5vh"
      width="40%">
      <el-form ref="dialogBindData" :model="dialogBindData" :rules="rules" label-width="30%" status-icon class="demo-ruleForm">
        <div class="formBody">
          <el-form-item label="选择商品类目" prop="store">
          <el-select v-model="dialogBindData.store" placeholder="请选择" size="small">
            <!--  <el-option
                v-for="item in store"
                :key="item.store"
                :label="item.name"
                :value="item.store"/>-->
            <el-option label="机油" value="100"></el-option>
            <el-option label="轮胎" value="101"></el-option>
            <el-option label="玻璃水" value="102"></el-option>
            <el-option label="车漆" value="104"></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="商品名称" prop="shopName">
            <el-input v-model="dialogBindData.shopName" size="small" type="text" placeholder="请输入"/>
          </el-form-item>
          <el-form-item label="商品编码" prop="coding">
            <el-input v-model="dialogBindData.coding" size="small" type="text" placeholder="请输入">

            </el-input>
          </el-form-item>
          <!-- <el-form-item label="类目" prop="category">
             <el-select v-model="dialogBindData.category" placeholder="请选择" size="small">
                  <el-option
                   v-for="item in category"
                   :key="item.category"
                   :label="item.name"
                   :value="item.category"/>
             </el-select>
           </el-form-item>-->
          <el-form-item label="规格" prop="specification">
            <el-input v-model="dialogBindData.specification" size="small" type="text" placeholder="请输入"/>
          </el-form-item>
          <el-form-item label="销售单价" prop="price">
            <el-input v-model="dialogBindData.price" size="small" type="text" placeholder="请输入金额"/>
          </el-form-item>
          <el-form-item label="库存" prop="inventory">
            <el-input v-model="dialogBindData.inventory" autosize type="textarea" placeholder="库存数量"/>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="dialogBindData.remark" autosize type="textarea" placeholder="备注"/>
          </el-form-item>

     <!--     <el-form-item label="上传图片" prop="img_url">
            <el-upload
              :limit="1"
              :action="actionUrl"
              :on-preview="handlePreview"
              :on-remove="handleRemoveOne"
              :on-exceed="handExceed"
              :file-list="mainfileList"
              :http-request="uploadFileImgOne"
              list-type="picture">
              <el-button :disabled="disableIinput" size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>-->
        </div>
        <div class="btns-wrapper">
          <el-button size="small" @click="handleClose">取 消</el-button>
          <el-button :loading="buttonState" type="primary" size="small" @click="submmitFun">保 存</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>


<script>
  import * as commodity from '../../api/commodity'

  import { getUserInformation } from '../../utils/auth'

  import uploadimg from '../../components/UpLoadImg_b2b2c'

  export default {
    components: {
      uploadimg
    },
    data() {
      return {
        isRouterAlive:true,
        // 页面搜索
        seacherParam: {
          shopName: ''
        },

        shopType:1,
        searchShow: false,
        pageNo: 1,
        pageSize: 10,
        rowCount: 20, // 总条数
        // 弹框
        dialogType: 1, // 1--增加  2--编辑  3--查看
        dialogState: false,
        // 按钮状态
        buttonState: false,
        // 列表数据
        dataOption: null,
        datavalID: [],
        // 删除id集合
        delIdArr: null,
        delBtn: true,
        // 提交内容
        dialogBindData: {
          inventory:null,
          shopType:1,
          store: null,
          nctid:100,
          name:'',
          shopName: '',
          coding: '',
          category: '请选择',
          specification: '',
          price: '',
          remark: '',
          createTime:'',
          id:''
        },
        rules: {
          shopName: [
            { required: true, message: '请输入品牌名称', trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
      dialogTitle() {
        if (this.dialogType === 1) {
          return '新增品牌'
        }
        if (this.dialogType === 2) {
          return '编辑品牌'
        } else {
          return '查看'
        }
      }
    },
    beforeMount() {
      this.getname()
      const userdata = JSON.parse(getUserInformation())
      this.userName = userdata.userName
      this.id=userdata.id


    },
    methods: {
      seachFun() {
        const param = {
          current: 1,
          size: this.pageSize,
          shopName:this.seacherParam.shopName
        }
        commodity.searchBrandList(param).then(res => {

          if (res.data.code !== 1) {
            this.$message.error(res.data.msg)
            return false
          }
          if (res.data.data === 'null' || res.data.data === null) {
            return false
          }
          // 初始话表格数据
          this.dataOption = res.data.data.records
          // 初始化分页数据
          this.rowCount = res.data.data.total
          this.pageSize = res.data.data.size
        })
      },
      getList(cb) {

        const param = {
          current: this.pageNo,
          size: this.pageSize
        }
        commodity.getBrandList(param).then(res => {
          if (res.data.code !== 1) {
            this.$message.error(res.data.msg)
            return false
          }
          if (res.data.data === 'null' || res.data.data === null) {
            return false
          }

          // 初始话表格数据
          this.dataOption = res.data.data.records
          // 初始化分页数据
          this.rowCount = res.data.data.total
          this.pageSize = res.data.data.size

        })
      },

      //查询商品项目
      getname(data)
      {
        const param = {

          shopType:this.shopType,
        }

        commodity.addBrandList1(param).then(res => {
          if (res.data.code !== 1) {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            })
            this.buttonState = false
            return false
          }

          this.buttonState = false
          //this.getList()
          //this.handleClose()
          // 初始话表格数据

          this.dataOption = res.data.data



        })
      },

      // 新增
      add() {
        this.dialogType = 1
        this.dialogState = true
        this.isRouterAlive = true
      },
      // 编辑
      edit(data) {

        this.reBindData(data)
        this.dialogType = 2
        this.dialogState = true
        this.isRouterAlive = true
        this.dialogBindData.id = data.id
      },
      // 提交
      submmitFun() {
        const param = {
          store:this.store,
          //userName:this.userName,
          id:this.id,
          nctid:this.dialogBindData.store,
          inventory:this.dialogBindData.inventory,
          shopName: this.dialogBindData.shopName,
          coding: this.dialogBindData.coding,
          category: this.dialogBindData.category,
          specification: this.dialogBindData.specification,
          price: this.dialogBindData.price,
          remark: this.dialogBindData.remark
        }

        if (this.dialogType !== 1) {
          param.id = this.dialogBindData.id
        }
        this.$refs.dialogBindData.validate((valid) => {
          if (valid) {
            if (this.dialogType === 1) {

              commodity.addBrandList(param).then(res => {
                if (res.data.code !== 1) {
                  this.$message({
                    message: res.data.msg,
                    type: 'warning'
                  })
                  this.buttonState = false
                  return false
                }
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.buttonState = false
                this.getname()
                /*this.getList()*/
                this.handleClose()
              })
            } else {
              commodity.editorBrandList(param).then(res => {
                if (res.data.code !== 1) {
                  this.$message({
                    message: res.data.msg,
                    type: 'warning'
                  })
                  this.buttonState = false
                  return false
                }
                this.$message({
                  message: '编辑成功',
                  type: 'success'
                })
                this.buttonState = false
                this.getname()
                 this.handleClose()
              })
            }
          } else {
            return false
          }
        })
      },




      // 删除
      del1(data){

        console.log(data)
        commodity.delBrandList(data.id).then(res => {
          if (res.data.code !== 1) {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            })
            this.buttonState = false
            return false
          }
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.buttonState = false
          this.getname()
          //this.handleClose()
        })
      },

      del(data) {
        if (this.datavalID.length === 0 && data === 0) {
          this.$message({
            type: 'warning',
            message: '请选择商品'
          })
          return false
        }
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delList(data)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      delList(data) {
        const classID = []
        if (data === 0) {
          for (const val of this.datavalID) {
            classID.push(val.id)
          }
        } else {
          classID.push(data.id)
        }
        commodity.delBrandList(classID).then(res => {
          if (res.data.code === 1) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getList()
          }
        })
      },
      changeFun(data) {
        this.datavalID = data
      },
      // 获取删除拍品集合
      delclassList() {
        commodity.delBList().then(res => {
          this.delIdArr = res.data.data
        })
      },
      imgurlFun(data) {
        this.dialogBindData.logoPicUrl = data
      },
      // 反显
      reBindData(data) {
        for (const key in this.dialogBindData) {
          if(key === 'logoPicUrl'){
            if(data[key] === null || data[key] === '' || data[key] === undefined){
              this.dialogBindData[key] = null
            }else {
              this.dialogBindData[key] = data[key]
            }
          }else {
            this.dialogBindData[key] = data[key]
            this.dialogBindData.store=data.nctid
            this.store=data.nctid
          }
        }
      },
      // 重置
      resetFun() {

        this.$refs.seacherParam.resetFields()
        this.pageNo = 1
        this.pageSize = 10
        this.getname()
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getname()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pageNo = val
        this.getname()
      },
      handleClose() {
        for (const key in this.dialogBindData) {
          if (key === 'language') {
            this.dialogBindData[key] = 1
          } else {
            this.dialogBindData[key] = ''
          }
        }
        this.dialogState = false
        this.isRouterAlive = false
        this.$refs.dialogBindData.clearValidate()
      },
      // 是否启用
      isAvailableVal(data) {
        if (data === 0) {
          return '不启用'
        } else if (data === 1) {
          return '启用'
        }
      },
      // 表格复选框隐藏
      cellcb(row) {
        for (const val of this.delIdArr) {
          if (row.row.id === val) {
            return 'myCell'
          }
        }
      },
      // 删除匹配
      delID(data) {
        for (const val of this.delIdArr) {
          if (data === val) {
            return true
          }
        }
      }
    }
  }
</script>·
<style type="text/scss" lang="scss">
  .myCell .el-checkbox__input {
    display: none
  }
</style>
<style type="text/scss" lang="scss" scoped>

</style>
